<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="layout :: common_header">
</head>

<nav th:insert="layout :: common_nav"></nav>

<div class="container">
    <div class="panel panel-primary">

        <div class="panel-heading">Todo Info</div>

        <div class="panel-body">

            <div class="panel panel-success">

                <div class="panel-heading">Todos</div>

                <div class="panel-body">

                    <ul>
                        <li th:each="todo : ${todos}" class="list-group">
                            <span th:text="${todo.name}" th:class="(${todo.complete == true} ? 'label label-success' : 'label label-primary')" ></span>

                            <form th:action="@{|/todos/${todo.id}|}" method="post" style="display: inline">
                                <input type="hidden" name="_method" value="put"/>
                                <input type="submit" class="list-group-item-success btn btn-link" value="update"/>
                            </form>

                            <form th:action="@{|/todos/${todo.id}|}" method="post" style="display: inline">
                                <input type="hidden" name="_method" value="delete"/>
                                <input type="submit" class="list-group-item-danger btn btn-link" value="Delete"/>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>


            <div class="panel panel-danger">

                <div class="panel-heading">Add a Todo</div>

                <div class="panel-body">

                    <div>
                        <form th:action="@{|/todos|}" method="post" th:object="${todo}">

                            <label>
                                <input type="text" name="name" required/>
                            </label>

                            <input type="submit" class="btn btn-success"/>
                        </form>
                    </div>
                </div>
            </div>

            <div th:insert="layout :: common_alert"></div>

        </div>
    </div>
    <img src="img/todo.jpg">
</div>>

</html>